<template>
<div class="page">
<div class="c-all">
   <img  class="cimg" :src='collect.ssrc' @click="previewImg(collect)"/>
   <div class="csbiao">{{collect.sbiao}}
    <!-- <div >{{collect1.sid}}</div> -->
    
   </div>
  
   <!-- <div @click="collectlog" class="anniu"></div> -->
   
     <div v-if="isCollected==false" @click="strategylog" >
     <!-- <div v-if="isCollected=false"></div> -->
     <img class="anniu" @click="handleCollection" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/dianzan_1.png" alt="">
   </div>
   <div v-if="isCollected!=false" @click="strategylog_no" >
     <!-- <div v-if="isCollected=false"></div> -->
     <img class="anniu" @click="handleCollection" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/dianzan.png" alt="">
</div>

</div>
  </div>
</template>


<script>
import {mapState} from 'vuex'
import {post,showModel} from '@/utli'
export default {
     props: ['collect','strategy'
              ],
              data(){
            return{
               isCollected:true,
               detailObj: {},
            }
        },
         beforeMount(){
        //   console.log(this)
        //   this.index=this.$mp.query.index
        let oldStorage =wx.getStorageSync('isCollected')
        if(!oldStorage){
          wx.setStorage({
            key:'isCollected',
            data:{}
          })
        }else{
          // oldStorage[this.collect.sid]
          this.isCollected=(oldStorage[this.collect.sid]?true:false)
        }
        },
        mounted(){
            this.detailObj = this.listTmp[this.collect.sid]
        },
        computed: {
      ...mapState(['listTmp'])
    },

     methods:{
       //点击进入详情
      //   previewImg(sitem) {
      //     wx.navigateTo({
           
      //   url: "../xiangqing/main?sitem="+JSON.stringify(sitem),
        
      // }),
      //  console.log("提交成功图片",this.collect.sid)
      
      //   },
    
       //收藏
      //   collectlog()
      //   {
      //  const  isCollected=wx.getStorageSync('isCollected')
      //  //缓存
      // //  console.log('缓存',this.collect1,isCollected)
      //  console.log('攻略id',this.strategy.sid,isCollected)
      //  console.log("提交成功收藏")
     
       
      //   },
        
        async handleCollection(){
        let isCollected = !this.isCollected
        this.isCollected =isCollected
        let title=isCollected?'收藏成功':'取消收藏'
        wx.showToast({
          title,
          icon: 'success',
          
        })
           let oldStorage =wx.getStorageSync('isCollected')
          //  oldStorage ={};
          // console.log(this.strategy.sid)
           oldStorage[this.collect.sid]=isCollected
          console.log(this.collect.sid,isCollected)//打印
          console.log('后台返回的信息',this.strategy)//打印
           wx.setStorage({
             key:'isCollected',
             data:oldStorage
           })
           if(isCollected==true){
              console.log('收藏')//打印
              // console.log('收藏879',this.strategy.openid)//打印
/////////////收藏
              const data={
        sid:this.collect.sid,
        // join字符串的形式
        openid:wx.getStorageSync('userinfo').openId,
        fopenid:this.collect.openid,
        sbiao:this.collect.sbiao,
        ssrc:this.collect.ssrc,
        szheng:this.collect.szheng,
        wx_name:this.collect.wx_name,
        create_time:this.collect.create_time,
        avatarurl:this.collect.avatarurl,
        nssrc:this.collect.nssrc,
        // wechat:this.wechat,
        
      }
      // console.log('收藏123',this.strategy.create_time)//打印
    try{
       const res = await post('/weapp/addcollectlist',data)
       console.log("从后端返回的执行正确的信息是:",res)
      //  console.log("从后端返回的执行正确的信息是:",data)
       wx.redirectTo({
        // 绝对路径前要加 /
        url: "/pages/collect/main",
      });
      
    }catch(e){
      console.log("从后端返回的执行错误的信息是",e)
       showModel('提交失败',"服务器出错")
    }
           }else{
///////////////////////// 未收藏            
              console.log('未收藏')//打印
              const data={
        sid:this.collect.sid,
        // join字符串的形式
        // src:this.src.join(","),
        // wechat:this.wechat,
        // openid:wx.getStorageSync('userinfo').openId,
        
      }
      // console.log('收藏123',data)//打印
    try{
       const res = await post('/weapp/deletecollectlist',data)
       console.log("从后端返回的执行正确的信息是:",res)
      //  console.log("从后端返回的执行正确的信息是:",data)
       wx.redirectTo({
        // 绝对路径前要加 /
        url: "/pages/collect/main",
      });
      
    }catch(e){
      console.log("从后端返回的执行错误的信息是",e)
       showModel('提交失败',"服务器出错")
    }
           }
            wx.hideToast()
      },

       previewImg(sitem) {
          wx.navigateTo({
           
        url: "../xiangqing/main?sitem="+JSON.stringify(sitem),
        
      }),
       console.log("提交成功图片id",this.collect.sid)
      //  console.log("提交成功图片",this.strategy.create_time)
      
        },
      mounted(){
      const userinfo =wx.getStorageSync('userinfo')
      if(userinfo.openId){
          this.userinfo = userinfo
          console.log("this.userinfo",this.userinfo)
      }
  },
  
     }
    
}
</script>

<style lang='scss'>
.page{
  width:100%;
}

//整个框
.c-all{
  position: relative;
  height:250px;
  width:159px;
  float: left;
  margin-top: 20px;
  margin-left:20px;
   box-shadow: 0 5px 5px 2px silver;
    border-radius: 4px;
  // border:1px solid red;
}
//图片
.cimg{
  height:250rpx;
  width:100%;
//  border:1px solid blue;
 border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

//标题
.csbiao{
  //上右下左
   font-size: 14px;
   padding: 5px 8px 5px 8px;
    margin-left: 10px;
    font-family:"宋体";
    font-weight:bold;
}



//收藏按钮样式
.anniu{
  position:absolute ;
  height:60rpx;
  width:60rpx;
  bottom: 25rpx;
  margin-left: 120px;
  // background:url(https://my-wechatl.oss-cn-beijing.aliyuncs.com/dianzan_1.png);
   background-size: cover;
 
}
</style>
